<template>
	<view class="main">
		<tou_hand1 handtitle='通知公告'></tou_hand1>
		<view class="show">
			
			<view class="sone">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="loading" :offset="300" :finished="finished" finished-text="没有更多了" @load="loadMore">
				<van-cell v-for="(item, index) in showlist" :key="index" >
				<view class="btap" @click="jumpbtn(item.id)">
					<view class="dbleft">
						<view class="dbtext">{{item.title}}</view>
					</view>
					<view class="dbright">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</view>
				</van-cell>
				</van-list>
				</van-pull-refresh>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand2/tou_hand2.vue'
	
	export default {
		components: {tou_hand1},
		mounted() {

		},

		data() {
			return {
				name:'',
				type:'',
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				showlist:[],//列表数据
			}
		},
		onLoad(options) {
			
		},
		onShow() {
			this.showlist=[]
			this.onRefresh();
		},
		methods: {
			// 获取用户管理的小区列表
			loadMore() {
				if (this.refreshing) {
				  this.showlist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum:that.pageNum,
					pageSize:that.pageSize
					
				}
				that.loading = true;
				that.$base.request('notice/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.showlist = that.showlist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			onRefresh() {
				  // 清空列表数据
				  this.finished = false;
				  this.pageNum=1
				  // 重新加载数据
				  // 将 loading 设置为 true，表示处于加载状态
				  this.loading = true;
				  this.loadMore();
			},
			jumpbtn(id){
				
					uni.navigateTo({
						url: '../notice_notice_detail/notice_notice_detail?id='+id
					})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		background-color: #2A3034;
		/deep/.van-cell{
			padding: 0upx;
			background-color: #3A4044;
		}
		/deep/.van-list__finished-text{
			padding-top: 100upx;
			padding-bottom: 200upx;
			background-color: #2A3034;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		/deep/.van-pull-refresh{
			background-color: #2A3034;
		}
		/deep/.van-cell:not(:last-child)::after{
			border-bottom:0upx ;
		}
		.show{
			width: 100%;
			.shand{
				width: 230upx;
				height: 230upx;
				margin: 90upx auto;
				image{
					width: 230upx;
					height: 230upx;
				}
			}
			.sone{
				width: 686upx;
				margin: 0 auto;
				background-color: #2A3034;
				margin-bottom: 100upx;
				margin-top: 20upx;
				.btap {
					width: 100%;
					box-sizing: border-box;
					border-bottom: 1upx solid #4A4E52;
					display: flex;
					justify-content: space-between;
					padding: 0 19upx;
					padding-bottom: 21upx;
					align-items: center;
					padding-top: 21upx;
					.dbleft {
						box-sizing: border-box;
						display: flex;
				
						image {
							width: 29upx;
							height: 37upx;
							margin-top: 9upx;
						}
				
						.dbtext {
							box-sizing: border-box;
							padding-top: 8upx;
							margin-left: 22upx;
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #fff;
						}
				
					}
				
					.dbright {
						box-sizing: border-box;
						display: flex;
						.dbphone{
							font-size: 24upx;
							font-family: PingFang SC Heavy, PingFang SC Heavy-Heavy;
							font-weight: 800;
							color: #4b98ed;
							margin-right: 28upx;
						}
						image {
							width: 19upx;
							height: 32upx;
						}
				
					}
				}
			}
			
		}
		
	}
</style>
